<template>
  <d2-container>
    <template slot="header">
      <el-form
        :gutter="24"
        ref="search-box"
        :model="mainQuery"
        label-width="auto"
        label-position="left"
        :inline="true"
      >
        <el-form-item label="原始币种" size="mini">
          <el-select
            v-model="mainQuery.sourceCurrency"
            size="small"
            filterable
            clearable
          >
            <el-option
              :placeholder="placeholder || '未选择'"
              v-for="item in optionsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目标币种" size="mini">
           <el-select
            v-model="mainQuery.targetCurrency"
            size="small"
            filterable 
            clearable
          >
            <el-option
              :placeholder="placeholder || '未选择'"
              v-for="item in optionsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分组" size="mini">
          <el-select
            v-model="mainQuery.rateGroupId"
            placeholder="所有"
            clearable
          >
            <el-option
              v-for="item in rateGroupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类型" size="mini">
          <el-select v-model="mainQuery.type" placeholder="所有" clearable>
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中行汇率类型" size="mini">
          <el-select v-model="mainQuery.rateType" placeholder="所有" clearable>
            <el-option
              v-for="item in rateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="偏移类型" size="mini">
          <el-select
            v-model="mainQuery.offsetType"
            placeholder="所有"
            clearable
          >
            <el-option
              v-for="item in offsetTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" size="mini">
          <el-select v-model="mainQuery.status" placeholder="所有" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否同步" size="mini">
          <el-select v-model="mainQuery.syncType" placeholder="所有" clearable>
            <el-option
              v-for="item in syncTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button
              class="filter-item"
              icon="el-icon-plus"
              type="success"
              @click="handleAdd"
              :loading="mainTable.loading"
              size="mini"
              >添加</el-button
            >
            <el-tooltip
              :disabled="!!mainTable.current"
              content="请选择一行数据"
            >
              <el-button
                class="filter-item"
                icon="el-icon-edit"
                type="default"
                @click="handleSet"
                :loading="mainTable.loading"
                size="mini"
                >修改</el-button
              >
            </el-tooltip>
          </el-button-group>
        </div>
        <div class="right">
          <el-button
            class="filter-item"
            icon="el-icon-refresh"
            type="default"
            @click="handleReset"
            :loading="mainTable.loading"
            size="mini"
            >重置</el-button
          >
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            @click="handleSearch"
            :loading="mainTable.loading"
            size="mini"
            >查询</el-button
          >
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @selection-change=""
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <dialog-add
      ref="dialog-add"
      @dialog-close="fetchMainData"
      :rateGroupOptions="rateGroupOptions"
      :currencyOptions="currencyOptions"
      :rateTypeOptions="rateTypeOptions"
      :syncTypeOptions="syncTypeOptions"
      :offsetTypeOptions="offsetTypeOptions"
      :typeOptions="typeOptions"
      :statusOptions="statusOptions"
    ></dialog-add>
  </d2-container>
</template>

<script>

import util from '@/libs/util';
import DialogAdd from './dialog-add';

import ApiMain from '@/api/exchangeRate.rateCustomized';
import ApiRateGroup from '@/api/exchangeRate.rateGroup';
import ApiRateBoc from '@/api/exchangeRate.rateBoc';

import CascaderCurrency from "@/views/exchangeRate/rateCustomized/components/cascader-currency";


export default {
  name: 'exchangeRate-rateCustomized',
  mixins: [
  ],
  components: {
    'dialog-add': DialogAdd,
    CascaderCurrency,
  },
  data() {
    return {  
      placeholder:false,
      optionsList:[],
      currencyOptions: [],
      rateGroupOptions: [],
      typeOptions: [],
      syncTypeOptions: [],
      offsetTypeOptions: [],
      rateTypeOptions: [],
      statusOptions: util.tool.getStatusOptions(),

      mainQueryRaw: null,
      mainQuery: {
        sourceCurrency: undefined,
        targetCurrency: undefined,
        rateGroupId: undefined,
        type: undefined,
        rateType: undefined,
        offsetType: undefined,
        syncType: undefined,
        status: undefined,
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '汇率组', key: 'strRateGroup', align: 'center', showOverflowTooltip: true },
          { title: '类型', key: 'strType', align: 'center', showOverflowTooltip: true },
          { title: '原始币种', key: 'sourceCurrency', align: 'center', showOverflowTooltip: true },
          { title: '目标币种', key: 'targetCurrency', align: 'center', showOverflowTooltip: true },
          { title: '中行汇率类型', key: 'strRateType', align: 'center', showOverflowTooltip: true, width: 120 },
          {
            title: '中行汇率', key: 'rate', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              return (val / 1e4).toFixed(4);
            }
          },
          { title: '偏移类型', key: 'strOffsetType', align: 'center', showOverflowTooltip: true },
          { title: '偏移量', key: 'strOffset', align: 'center', showOverflowTooltip: true },
          {
            title: '平台汇率', key: 'finalRate', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              return (val / 1e4).toFixed(4);
            }
          },
          { title: '是否同步', key: 'strSyncType', align: 'center', showOverflowTooltip: true },
          { title: '状态', key: 'strStatus', align: 'center', showOverflowTooltip: true, width: 50 },
          { title: '修改时间', key: 'updateTime', align: 'center', showOverflowTooltip: true, width: 160 },
          { title: '创建时间', key: 'createTime', align: 'center', showOverflowTooltip: true, width: 160 },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },


    }
  },
  mounted() {
    this.handleShow();
  },

  methods: {

    startLoading() {
      this.mainTable.loading = true;
    },

    stopLoading() {
      this.mainTable.loading = false;
    },

    async handleShow() {

      this.startLoading();

      this.mainQueryRaw = Object.copy(this.mainQuery);

      try {
        this.optionsList = await ApiRateBoc.getrateBocOptions()
        await this.fetchOptions();
      }
      catch (err) { }

      await this.handleReset();

      this.stopLoading();
    },

    async handleReset() {
      this.startLoading();
      await this.resetMainData();
      this.stopLoading();
    },

    async handleSearch() {
      this.startLoading();
      this.mainTable.pagination.currentPage = 1;
      await this.fetchMainData();
      this.stopLoading();
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.handleSearch()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.handleSearch()
    },

    renderMainData(re) {

      re.list.forEach(item => {

        // 状态
        var statusItem = this.statusOptions.find(v => v.value == item.status);
        item.strStatus = statusItem ? statusItem.label : '-';

        // 汇率组
        var rateGroupItem = this.rateGroupOptions.find(v => v.value == item.rateGroupId);
        item.strRateGroup = rateGroupItem ? rateGroupItem.label : '-';

        // 偏移类型
        var offsetTypeItem = this.offsetTypeOptions.find(v => v.value == item.offsetType);
        item.strOffsetType = offsetTypeItem ? offsetTypeItem.label : '-';

        // 类型
        var typeItem = this.typeOptions.find(v => v.value == item.type);
        item.strType = typeItem ? typeItem.label : '-';

        // 中行汇率类型
        var rateTypeItem = this.rateTypeOptions.find(v => v.value == item.rateType);
        item.strRateType = rateTypeItem ? rateTypeItem.label : '-';

        // 是否同步
        var syncTypeItem = this.syncTypeOptions.find(v => v.value == item.syncType);
        item.strSyncType = syncTypeItem ? syncTypeItem.label : '-';

        // 中行汇率, 平台汇率
        // item.rate /= 1e4;
        // item.finalRate /= 1e4;

      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    buildMainQuery() {

      var search = Object.copy(this.mainQuery);

      if (!!search.sourceCurrency) {
        if (Array.isArray(search.sourceCurrency)) {
          search.sourceCurrency = search.sourceCurrency[1];
        }
      }

      if (!!search.targetCurrency) {
        if (Array.isArray(search.targetCurrency)) {
          search.targetCurrency = search.targetCurrency[1];
        }
      }

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: search,
      };

      return query;
    },

    async resetMainData() {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      await this.fetchMainData();
    },

    async fetchOptions() {

      this.rateGroupOptions = await ApiRateGroup.getOptions();
      this.rateTypeOptions = await ApiMain.getRateTypeOptions();
      this.typeOptions = await ApiMain.getTypeOptions();
      this.syncTypeOptions = await ApiMain.getSyncTypeOptions();
      this.offsetTypeOptions = await ApiMain.getOffsetTypeOptions();
      this.currencyOptions = await ApiRateBoc.getCurrencyOptions();
    },

    async fetchMainData() {
      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }
    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() { 
      this.$refs['dialog-add'].show();
    },

    handleSet() {

      if (this.mainTable.current) {
        this.$refs['dialog-add'].show(this.mainTable.current.id);
      }
    },
  }
}
</script>

<style>
</style>
